<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { router } from "@/router";
import { get_scan_tactics, getPocTactics } from "@/api/tactics";
import {
  get_department_ip,
  add_department_ip,
  delete_department_ip,
  update_department_ip,
} from "@/api/asset";
import { message } from "@/utils/message";
defineOptions({
  name: "BasisTable",
});

const formInline = reactive({
  policy_name: "",
  taskName: "",
  creater: "",
  task_id: "",
  ipscope: "",
  createTime: "",
  tacticsName: "",
  level: "",
  department: "",
});

const formAddHardware = reactive({
  department: "",
  ipscope: "",
});

const formUpdateHardware = reactive({
  department: "",
  ipscope: "",
});

const addHardwareFormRef = ref<FormInstance>();

const updateHardwareFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  taskName: [
    { required: true, message: "请输入任务名称", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
    // { validator: validatePass2, trigger: 'blur' }
  ],
  taskRegion: [
    {
      required: true,
      message: "请填写资产范围~",
      trigger: "blur",
    },
  ],
  taskType: [
    {
      required: true,
      message: "请选择一个任务类别",
      trigger: "change",
    },
  ],
  linkTactics: [
    {
      required: true,
      message: "请关联策略",
      trigger: "change",
    },
  ],
  startTime: [
    {
      // type: "array",
      required: true,
      message: "请选择日期区间",
      trigger: "change",
    },
  ],
});

const showAddHardwareDialog = ref(false);

//更新
const showUpdateHardwareDialog = ref(false);

//更新创
const updateId = ref(0);

const tableData = ref([]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

const getDepartmentIpList = () => {
  get_department_ip({
    ip_range: formInline.ipscope,
    department: formInline.department,
    per_page: pageSize.value,
    page: currentPage.value,
  }).then((res) => {
    if (res.code === 2000) {
      tableData.value = res.data;
      totalTabalData.value = res.total;
    }
  });
};

const deleteDepartmentIp = (id) => {
  delete_department_ip({
    id: id,
  }).then((res) => {
    if (res.code === 2000) {
      message(res.message);
      getDepartmentIpList();
    }
  });
};

const updateDepartmentIp = (row) => {
  showUpdateHardwareDialog.value = true;
  updateId.value = row.id;
  formUpdateHardware.ipscope = row.ip_range;
  formUpdateHardware.department = row.department;
};

const updateDepartmentConfirm = async (formEl) => {
  update_department_ip({
    id: updateId.value,
    ip_range: formUpdateHardware.ipscope,
    department: formUpdateHardware.department,
  }).then((res) => {
    if (res.code === 2000) {
      showUpdateHardwareDialog.value = false;
      message(res.message);
      getDepartmentIpList();
    }
  });
};

const addDepartment = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      add_department_ip({
        ip_range: formAddHardware.ipscope,
        department: formAddHardware.department,
      }).then((res) => {
        if (res.code === 2000) {
          message(res.message);
          showAddHardwareDialog.value = false;
          getDepartmentIpList();
        }
      });
    } else {
    }
  });
};

const resetAddTaskForm = () => {
  formAddHardware.ipscope = "";
  formAddHardware.department = "";
};

const resetUpdateTaskForm = () => {
  formUpdateHardware.ipscope = "";
  formUpdateHardware.department = "";
};

watch(showAddHardwareDialog, (newVal, oldVal) => {
  if (newVal === false) {
    resetAddTaskForm();
  }
});

watch(showUpdateHardwareDialog, (newVal, oldVal) => {
  if (newVal === false) {
    resetUpdateTaskForm();
  }
});

onMounted(() => {
  getDepartmentIpList();
});
</script>

<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item>
                <el-button type="primary" @click="showAddHardwareDialog = true"
                  >新建部门</el-button
                >
              </el-form-item>

              <el-form-item label="部门名称">
                <el-input
                  v-model="formInline.department"
                  placeholder="部门名称"
                  maxlength="30"
                  clearable
                  @keydown.enter="getDepartmentIpList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getDepartmentIpList" />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="IP段">
                <el-input
                  v-model="formInline.ipscope"
                  placeholder="IP段"
                  maxlength="30"
                  clearable
                  @keydown.enter="getDepartmentIpList"
                >
                  <template #append>
                    <el-button :icon="Search" @click="getDepartmentIpList" />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <!-- <el-table-column type="selection" width="55" /> -->
          <!-- <el-table-column type="index" width="80" label="序号" />  -->
          <el-table-column label="ID" prop="id" width="100" />
          <el-table-column label="部门名称" prop="department" />
          <el-table-column label="IP段" prop="ip_range" />
          <el-table-column label="操作" fixed="right">
            <template #default="rowscope">
              <el-button
                size="small"
                type="success"
                @click="updateDepartmentIp(rowscope.row)"
              >
                编辑</el-button
              >
              <el-button
                size="small"
                type="warning"
                @click="deleteDepartmentIp(rowscope.row.id)"
              >
                删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getDepartmentIpList"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="getDepartmentIpList"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>

      <el-dialog
        v-model="showAddHardwareDialog"
        :show-close="true"
        destroy-on-close
        width="500px"
      >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">新建部门</h4>
          </div>
        </template>

        <el-form
          :inline="false"
          :model="formAddHardware"
          :rules="hardwareRules"
          ref="addHardwareFormRef"
          class="demo-form-inline"
        >
          <el-form-item label="部门" label-width="100px" prop="department">
            <el-input
              v-model="formAddHardware.department"
              placeholder="请填写部门"
              class="min-w-input"
              clearable
            />
          </el-form-item>
          <el-form-item label="IP段" label-width="100px" prop="ipscope">
            <el-input
              v-model="formAddHardware.ipscope"
              placeholder="请填写IP段"
              class="min-w-input"
              clearable
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div>
            <el-button @click="showAddHardwareDialog = false"> 取消 </el-button>
            <el-button
              type="primary"
              @click="addDepartment(addHardwareFormRef)"
            >
              <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog
        v-model="showUpdateHardwareDialog"
        :show-close="true"
        destroy-on-close
        width="500px"
      >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">编辑部门</h4>
          </div>
        </template>

        <el-form
          :inline="false"
          :model="formUpdateHardware"
          :rules="hardwareRules"
          ref="addHardwareFormRef"
          class="demo-form-inline"
        >
          <el-form-item label="部门" label-width="100px" prop="department">
            <el-input
              v-model="formUpdateHardware.department"
              placeholder="请填写部门"
              class="min-w-input"
              clearable
            />
          </el-form-item>
          <el-form-item label="IP段" label-width="100px" prop="ipscope">
            <el-input
              v-model="formUpdateHardware.ipscope"
              placeholder="请填写IP段"
              class="min-w-input"
              clearable
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div>
            <el-button @click="showUpdateHardwareDialog = false">
              取消
            </el-button>
            <el-button
              type="primary"
              @click="updateDepartmentConfirm(updateHardwareFormRef)"
            >
              <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}
</style>
